什麼是 SCSS?

簡單一句話概括就是用來管理 CSS 的工具。

那 SCSS 到底??

SCSS 只是 Sass 的其中一種寫法，所以並不能稱為語言。
SCSS 與 CSS 最大的差異在於瀏覽器能讀懂 CSS，但不能直接讀懂透過 SCSS 寫的內容。
因此得透過編譯的方式轉回 CSS 才行。

SCSS 的編譯工具?

最常用的編譯工具為 VSCode 的 Live Sass Compiler 套件

安裝完後，最下面藍色區塊會出現 Watch Sass，按下去就會開始編譯，不能編譯時也會提醒你喔(真貼心~~

其次也有看過有人使用 Prepros，但因為 VSCode 的套件太好用了，所以至今還沒跳槽XD~

prepros 官網

一進入官網下滑就可以看到他還可以編譯其他東西，

其他還有使用 glup、webpack 等打包工具來編譯。

SCSS 的基礎撰寫架構

與一般的 CSS 基本上無異，僅需用大括號將底下的原件包覆在父元件中即可。
HTML 架構

<div class="tsDiv">
    <p class="tsP">測試中~~~</p>
</div>

傳統 CSS 寫法

.tsDiv > .tsP {
  color: red;
}

SCSS 寫法

.tsDiv {
  > .tsP {
    color: red;
  }
}

SCSS 寫法內的箭頭與 CSS 內所代表的意思相同，都是指父元件底下一層的子元件。

連接詞教學

& 代表連結符號
用於連接偽元素、偽類等等

.tsDiv {
  > .tsP {
    color: red;
    &:hover {
      color: blue;
    }
  }
}

在需要使用的地方直接用個連結符號，搭配合適的偽元素來達成目的。冒號也都只需一個。

以上就是今天的分享，明天會是簡單的變數介紹，盡請期待喽! Nice 進度剛好